<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <div style="width: 200px;height:200px;background-color:#b20000" @click="test1">
            <div style="width: 100px;height:100px;background-color:#000000" @click.stop="test2">

            </div>

        </div>
        <!-- 阻断链接行为 -->
        <a href="https://www.baidu.com" @click.prevent="linkClick">去百度</a>
        <!-- .once 只触发一次事件 -->
        <a href="https://www.baidu.com" @click.prevent.once="linkClick">再去百度</a>

        <!-- .capture改变事件优先级 -->
        <div style="width: 200px;height:200px;background-color:#b20000" @click.capture="test1">
            <div style="width: 100px;height:100px;background-color:#000000" @click="test2">

            </div>

        </div>
        <!-- .self 只阻断当前的事件 不影响后续冒泡行为扩散 -->
        <div style="width: 200px;height:200px;background-color:#b20000" @click="test1">
            <div style="width: 100px;height:100px;background-color:#000000" @click.self="test2">
                <div style="width: 50px;height:50px;background-color:#42b622" @click="test3"></div>
            </div>

        </div>

    </div>
    <script>
        Vue.config.productionTip = false //关闭生成信息提示
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                //事件方法1
                test1() {
                    alert('外层元素触发1')
                },
                test2() {
                    alert('内层元素触发2')
                },
                test3() {
                    alert('更内层元素触发3')
                },
                linkClick() {
                    alert('超级链接被点击')
                }
            },
        })
    </script>
</body>

</html>